<template>
  <div>
    <el-drawer
      :title="title"
      :destroy-on-close="true"
      v-model="isShow"
      size="45%"
      @close="closeDra"
    >
      <el-form
        :model="formData"
        ref="form"
        :rules="formRules"
        label-width="135px"
        label-position="top"
        :inline="false"
      >
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="小区名称" prop="community_code">
              <el-select
                placeholder="请选择小区"
                v-model="formData.community_code"
                style="width: 100%"
                clearable
                @change="changeDevice"
              >
                <el-option
                  v-for="item in communityList"
                  :key="id"
                  :label="item.name"
                  :value="item.code"
                >
                  {{ item.name }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="设备名称" prop="device_code">
              <el-select
                placeholder="请选择设备名称"
                v-model="formData.device_code"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                >
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="维修单位名称" prop="unit">
              <el-input
                v-model="formData.unit"
                placeholder="请输入维修单位名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="维修人名称" prop="contacts">
              <el-input
                v-model="formData.contacts"
                placeholder="请输入维修人名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="维修人联系方式" prop="contacts_tel">
              <el-input
                v-model="formData.contacts_tel"
                placeholder="请输入维修人联系方式"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="最后一次维护时间" prop="last_maintain_time">
              <el-date-picker
                v-model="defaultFormData.last_maintain_time"
                type="date"
                placeholder="请输入最后一次维护时间"
                @change="lastTimeChange"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="下次维修时间" prop="next_maintain_time">
              <el-date-picker
                v-model="defaultFormData.next_maintain_time"
                type="date"
                placeholder="请输入最后一次维护时间"
                @change="nextTimeChange"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                v-model="formData.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="售后图片">
          <ImageUpload
            v-model="formData.photo"
            :limit="1"
            :type="'adv'"
          ></ImageUpload>
        </el-form-item>
        <el-row :gutter="20" type="flex" justify="end">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="isShow = false">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw } from "vue";
import { ElMessage } from "element-plus";
import { getCommunityList } from "@/api/community_yuan.js";
import {
  addMaintainAdList,
  getMaintainAdInfo,
  editMaintainAdList,
} from "@/api/maintain.js";
import { getDeviceNameAdList } from "@/api/device.js";

const communityList = ref([]);
const deviceList = ref([]);
const isShow = ref(false);
const form = ref();
const emit = defineEmits("updateList");
const defaultFormData = reactive({
  community_code: "",
  contacts: "",
  contacts_tel: "",
  device_code: "",
  last_maintain_time: "",
  next_maintain_time: "",
  photo: "",
  remark: "",
  unit: "",
  id: null,
});

const formData = reactive({ ...defaultFormData });
const formRules = ref({
  community_code: [
    { required: true, message: "请选择所属小区", trigger: "change" },
  ],
  last_maintain_time: [
    { required: true, message: "请选择最后一次维修时间", trigger: "change" },
  ],
  next_maintain_time: [
    { required: true, message: "请选择下一次维修时间", trigger: "change" },
  ],
  device_code: [
    { required: true, message: "请选择设备名称", trigger: "change" },
  ],
  contacts: [
    { required: true, message: "请输入维修人员名称", trigger: "blur" },
  ],
  contacts_tel: [
    { required: true, message: "请输入维修人员联系方式", trigger: "blur" },
  ],
  unit: [{ required: true, message: "请输入维修单位名称", trigger: "blur" }],
});
const initData = async () => {
  let { data } = await getCommunityList();
  communityList.value = data;
};

const title = computed(() => (formData.id !== null ? "修改维修" : "添加维修"));

const onSubmit = async () => {
  try {
    await form.value.validate();
    const data = toRaw(formData);
    formData.id !== null
      ? await editMaintainAdList(data)
      : await addMaintainAdList(data);
    ElMessage.success("提交成功");
    isShow.value = false;
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};

const changeDevice = async () => {
  let { data } = await getDeviceNameAdList(formData.community_code);
  deviceList.value = data;
};

const lastTimeChange = (val) => {
  formData.last_maintain_time = +new Date(val);
};
const nextTimeChange = (val) => {
  formData.next_maintain_time = +new Date(val);
};

const replayInfo = async (id) => {
  let { data } = await getMaintainAdInfo(id);
  Object.assign(formData, data);
  defaultFormData.last_maintain_time = data.last_maintain_time;
  defaultFormData.next_maintain_time = data.next_maintain_time;
  isShow.value = true;
};

onMounted(() => {
  initData();
});

const closeDra = async () => {
  await nextTick(() => {
    form.value.resetFields();
  });
  Object.assign(formData, { ...defaultFormData });
  defaultFormData.last_maintain_time = "";
  defaultFormData.next_maintain_time = "";
};

defineExpose({
  isShow,
  replayInfo,
});
</script>

<style scoped></style>
